<template>
  <div class="home-page">
    <div class="recommend">
      <div class="top-title">
        <span>热门专题</span>
        <span class="collection-change" @click="handleChange">
          <span class="iconfont">&#xe626;</span>
          换一批
        </span>
      </div>
      <div class="recommend-collection">
        <a class="tag" v-for="item of aList" :href="item.url" :key="item.name">
          {{item.name}}
        </a>
      </div>
    </div>
    <hr />
    <div class="flow-list-container">
      <ul>
        <li :class="['note-flow', { 'has-img': item.list_image_url }]"
          v-for="item of trendList" :key="item.id">
          <div class="summary">
            <span class="img-wrap" v-if="item.list_image_url">
              <img :src="item.list_image_url" />
            </span>
            <h6 class="title">
              {{item.title}}
            </h6>
            <p class="abstract">
              {{item.public_abbr}}
            </p>
          </div>
          <div class="online">
            <span class="name">
              {{item.user.nickname}}
            </span>
            <span>
              <span class="iconfont ic-list-comments">&#xe684;</span>
              {{item.public_comments_count}}
            </span>
            <span>
              <span class="iconfont ic-list-like">&#xe634;</span>
              {{item.likes_count}}
            </span>
          </div>
        </li>
      </ul>
      <div>
        <div class="load-more" @click="handleLoadMore">
          展开更多文章
          <span class="iconfont">&#xe62e;</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
export default {
  name: 'HomePage',
  props: {
    trendingList: Array
  },
  data () {
    return {
      trendList: [],
      aList: [],
      recommendList: [
        [{
          name: '摄影',
          url: 'https://www.jianshu.com/c/7b2be866f564?utm_source=mobile&utm_medium=collections'
        }, {
          name: '故事',
          url: 'https://www.jianshu.com/c/fcd7a62be697?utm_source=mobile&utm_medium=collections'
        }, {
          name: '读书',
          url: 'https://www.jianshu.com/c/yD9GAd?utm_source=mobile&utm_medium=collections'
        }, {
          name: '简书电影',
          url: 'https://www.jianshu.com/c/1hjajt?utm_source=mobile&utm_medium=collections'
        }, {
          name: '手绘',
          url: 'https://www.jianshu.com/c/8c92f845cd4d?utm_source=mobile&utm_medium=collections'
        }, {
          name: '@IT·互联网',
          url: 'https://www.jianshu.com/c/V2CqjW?utm_source=mobile&utm_medium=collections'
        }, {
          name: '旅行·在路上',
          url: 'https://www.jianshu.com/c/5AUzod?utm_source=mobile&utm_medium=collections'
        }], [{
          name: '自然科普',
          url: 'https://www.jianshu.com/c/cc7808b775b4?utm_source=mobile&utm_medium=collections'
        }, {
          name: '诗',
          url: 'https://www.jianshu.com/c/vHz3Uc?utm_source=mobile&utm_medium=collections'
        }, {
          name: '美食',
          url: 'https://www.jianshu.com/c/qqfxgN?utm_source=mobile&utm_medium=collections'
        }, {
          name: '连载小说',
          url: 'https://www.jianshu.com/c/xYuZYD?utm_source=mobile&utm_medium=collections'
        }, {
          name: '程序员',
          url: 'https://www.jianshu.com/c/NEt52a?utm_source=mobile&utm_medium=collections'
        }, {
          name: '上班这点事儿',
          url: 'https://www.jianshu.com/c/Jgq3Wc?utm_source=mobile&utm_medium=collections'
        }, {
          name: '漫画',
          url: 'https://www.jianshu.com/c/263e0ef8c3c3?utm_source=mobile&utm_medium=collections'
        }],
        [{
          name: '短篇小说',
          url: 'https://www.jianshu.com/c/dqfRwQ?utm_source=mobile&utm_medium=collections'
        }, {
          name: '国学与传统文化',
          url: 'https://www.jianshu.com/c/742422443ad3?utm_source=mobile&utm_medium=collections'
        }, {
          name: '婚姻育儿',
          url: 'https://www.jianshu.com/c/70b8514fb442?utm_source=mobile&utm_medium=collections'
        }, {
          name: '娱乐圈',
          url: 'https://www.jianshu.com/c/e50258a6a44b?utm_source=mobile&utm_medium=collections'
        }, {
          name: '原创儿童文学',
          url: 'https://www.jianshu.com/c/6fba5273f339?utm_source=mobile&utm_medium=collections'
        }, {
          name: '简书交友',
          url: 'https://www.jianshu.com/c/bd38bd199ec6?utm_source=mobile&utm_medium=collections'
        }, {
          name: '生活家',
          url: 'https://www.jianshu.com/c/f6b4ca4bb891?utm_source=mobile&utm_medium=collections'
        }],
        [{
          name: '创业',
          url: 'https://www.jianshu.com/c/LLCyGH?utm_source=mobile&utm_medium=collections'
        }, {
          name: '@产品',
          url: 'https://www.jianshu.com/c/ad41ba5abc09?utm_source=mobile&utm_medium=collections'
        }, {
          name: '简书脱单',
          url: 'https://www.jianshu.com/c/accb04610749?utm_source=mobile&utm_medium=collections'
        }]
      ],
      count: 0
    }
  },
  watch: {
    trendingList (newVal, oldVal) {
      this.trendList = [...newVal]
    }
  },
  methods: {
    handleChange () {
      this.aList = this.recommendList[(++this.count) % this.recommendList.length]
    },
    handleLoadMore () {
      axios.get('/api/home2.json').then(res => {
        let data = res.data.trending.trendingNow.data
        let list = []
        data.forEach((item, index) => {
          list.push(item.object.data)
        })

        console.log(list)
        this.trendList.splice(this.trendList.length, 0, ...list)
      })
    }
  },
  mounted () {
    this.aList = this.recommendList[this.count]
  }
}
</script>

<style scoped>
  .home-page {
    padding-left: .36rem;
    padding-right: .36rem;
  }
  .top-title {
    margin-left: -.36rem;
    margin-right: -.36rem;
    padding: .2rem .36rem;
    line-height: 1.6;
    font-size: 14px;
    font-weight: 700;
    color: #545454;
  }
  .collection-change {
    float: right;
    color: #888;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.75;
  }
  .collection-change>span {
    font-size: 12px;
  }
  .recommend-collection {
    padding-bottom: .1rem;
  }
  .tag {
    display: inline-block;
    padding: .04rem .2rem;
    margin: 0 .24rem .24rem 0;
    font-size: 14px;
    position: relative;
    color: #ea6f5a;
    line-height: 1.6;
  }
  .tag:after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 200%;
    height: 200%;
    border: 1px solid #ea6f5a;
    transform: scale(.5);
    transform-origin: top left;
    border-radius: .16rem;
    box-sizing: border-box; /* 必须得加，不然相差一像素 */
  }
  hr {
    margin: 0 -.36rem;
    border-width: 0;
    height: .2rem;
    background: #f5f5f5;
  }
  .load-more {
    margin: auto 0;
    padding: .3rem 0 .3rem .14rem;
    text-align: center;
    font-size: 15px;
    color: #969696;
    line-height: 1.6;
  }
  .load-more>span {
    font-size: 13px;
  }
  .note-flow {
    position: relative;
    width: 100%;
    word-wrap: break-word;
    padding: .3rem .36rem;
    margin: 0 -.36rem;
    box-sizing: content-box;
    border-bottom: 1px solid;
    font-size: 0;
    color: #f0f0f0;
  }
  .summary {
    margin-top: .12rem;
  }
  .has-img > .summary, .has-img > .online {
    padding-right: 1.9rem;
  }
  .img-wrap {
    width: 1.6rem;
    height: 1.6rem;
    position: absolute;
    top: 50%;
    right: .3rem;
    margin-top: -.8rem;
    border-radius: .06rem;
    overflow: hidden;
    display: inline-block;

  }
  .img-wrap img {
    width: 100%;
    height: 100%;
  }
  .title {
    font-size: 18px;
    font-weight: 700;
    color: #333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: .5rem;
    max-height: 1rem;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    box-sizing: content-box;
  }
  .abstract {
    margin-top: .12rem;
    font-size: 13px;
    line-height: .38rem;
    max-height: .76rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    box-sizing: content-box;
    color: #999;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
  }
  .online {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin-top: .16rem;
    /* font-size为0，line-height为22px，最后高度为26px，不懂？？？ */
    font-size: 0;
    line-height: 22px;
  }
  .online>span {
    margin-right: .16rem;
    font-size: 12px;
    color: #b1b1b1;
  }
  .online>.name {
    margin-right: .24rem;
  }
  .ic-list-comments, .ic-list-like {
    font-size: 13px;
  }
</style>
